<template>
  <view class="rich-container">
    <!-- 工具栏 -->
    <view class="toolbar" @click="format">
      <view class="tool-group">
        <view class="tool-item" :class="{ active: formats.bold }" data-name="bold">
          <view class="tool-icon">B</view>
        </view>

        <view class="tool-item" :class="{ active: formats.italic }" data-name="italic">
          <view class="tool-icon">I</view>
        </view>
        <view class="tool-item" :class="{ active: formats.underline }" data-name="underline">
          <view class="tool-icon">U</view>
        </view>
        <view class="divider"></view>
        <view class="tool-item" data-name="insertImage">
          <view class="tool-icon">图片</view>
        </view>
      </view>

      <view class="tool-group">
        <view
          class="tool-item"
          :class="{ active: formats.align === 'left' }"
          data-name="align"
          data-value="left"
        >
          <view class="tool-icon">左</view>
        </view>
        <view
          class="tool-item"
          :class="{ active: formats.align === 'center' }"
          data-name="align"
          data-value="center"
        >
          <view class="tool-icon">中</view>
        </view>
        <view
          class="tool-item"
          :class="{ active: formats.align === 'right' }"
          data-name="align"
          data-value="right"
        >
          <view class="tool-icon">右</view>
        </view>
      </view>

      <view class="tool-group">
        <view class="tool-item" data-name="list" data-value="ordered">
          <view class="tool-icon">1.</view>
        </view>
        <view class="tool-item" data-name="list" data-value="bullet">
          <view class="tool-icon">•</view>
        </view>
      </view>
      <view class="tool-group">
        <view class="tool-item" data-name="undo">
          <view class="tool-icon">↶</view>
        </view>
        <view class="tool-item" data-name="redo">
          <view class="tool-icon">↷</view>
        </view>
        <view class="tool-item" data-name="clear">
          <view class="tool-icon">清空</view>
        </view>
      </view>
    </view>

    <!-- 编辑区域 -->
    <view class="editor-wrapper">
      <editor
        id="editor"
        class="editor"
        placeholder="请输入内容..."
        show-img-size
        show-img-toolbar
        show-img-resize
        @statuschange="onStatusChange"
        @ready="onEditorReady"
        @input="onInput"
      ></editor>
    </view>

    <!-- 底部工具栏 -->
    <view class="bottom-bar">
      <button class="submit-btn" size="mini">提交</button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
let editorCtx = ref(null);
const formats = ref({
  bold: "",
  italic: "",
  underline: "",
  align: "",
  list: "",

  insertImage: "",
  insertLink: "",
});
let htmlVal = ref("");
const onInput = e => {
  htmlVal.value = e.detail.html;
  console.log("编辑器内容：", e.detail.html);
};

const onStatusChange = e => {
  formats.value = e.detail;
  console.log("e.detail", e.detail, formats.value);
};

const onEditorReady = () => {
  console.log("editor ready");
  uni
    .createSelectorQuery()
    .select("#editor")
    .context(res => {
      if (res.context) {
        editorCtx.value = res.context;
        console.log("editor context ready");
      }
    })
    .exec();
};

const format = e => {
  let { name, value } = e.target.dataset;
  console.log("format:", name, value);
  if (!name) return;
  if (!editorCtx.value) {
    console.log("editor context not ready");
    return;
  }

  // 处理撤销
  if (name === "undo") {
    editorCtx.value.undo();
    return;
  }

  // 处理重做
  if (name === "redo") {
    editorCtx.value.redo();
    return;
  }
  if (name === "clear") {
    editorCtx.value.clear();
    return;
  }
  // 处理链接

  // 处理图片插入
  if (name === "insertImage") {
    uni.chooseImage({
      count: 1,
      success: res => {
        editorCtx.value.insertImage({
          src: res.tempFilePaths[0],
          alt: "图片",
          success: () => {
            console.log("插入图片成功");
          },
          fail: err => {
            console.error("插入图片失败:", err);
          },
        });
      },
      fail: err => {
        console.error("选择图片失败:", err);
      },
    });
    return;
  }

  editorCtx.value.format(name, value);
};
// 确保编辑器初始化
// onMounted(() => {
//   setTimeout(() => {
//     onEditorReady();
//   }, 100);
// });
</script>

<style lang="scss">
.rich-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;

  .toolbar {
    background-color: #fff;
    display: flex;
    padding: 12rpx;
    border-bottom: 1rpx solid #eee;
    flex-wrap: wrap;
    .tool-group {
      display: inline-flex;
      align-items: center;
      margin: 4rpx 20rpx 4rpx 0;

      &:not(:last-child) {
        padding-right: 16rpx;
        border-right: 1rpx solid #eee;
      }
    }

    .tool-item {
      min-width: 64rpx;
      height: 64rpx;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 9rpx;
      margin: 0 2rpx;
      border-radius: 8rpx;
      transition: all 0.2s;

      &.active {
        background-color: #e6f4ff;
        color: #1890ff;
      }

      &:active {
        background-color: #f5f5f5;
      }

      .tool-icon {
        font-size: 28rpx;
        pointer-events: none;
        &.icon-undo,
        &.icon-redo {
          font-size: 32rpx;
        }
      }
    }

    .divider {
      width: 1rpx;
      height: 32rpx;
      background-color: #eee;
      margin: 0 16rpx;
    }

    // 隐藏滚动条但保持功能
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .editor-wrapper {
    flex: 1;
    padding: 24rpx;

    .editor {
      height: 100%;
      background-color: #fff;
      border-radius: 12rpx;
      padding: 20rpx;
      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

      &::placeholder {
        color: #999;
      }
    }
  }

  .bottom-bar {
    padding: 20rpx;
    background-color: #fff;
    border-top: 1rpx solid #eee;
    display: flex;
    justify-content: center;
    .submit-btn {
      background-color: #1890ff;
      color: #fff;
      font-size: 28rpx;
      padding: 0 32rpx;

      &:active {
        opacity: 0.8;
      }
    }
  }
}

// 小程序适配
@media screen and (max-width: 768px) {
  .rich-container {
    .toolbar {
      .tool-item {
        min-width: 56rpx;
        height: 56rpx;

        .tool-icon {
          font-size: 24rpx;
        }
      }
    }

    .editor-wrapper {
      padding: 16rpx;
    }

    .bottom-bar {
      padding: 16rpx;
      padding-bottom: 40rpx;

      .submit-btn {
        font-size: 24rpx;
        padding: 0 24rpx;
      }
    }
  }
}
</style>
